<template>
    <div class="main-pagination">
        <el-pagination v-model:currentPage="pagination.current" v-model:page-size="pagination.size"
            :page-sizes="[5, 10, 20, 40]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
            @size-change="refresh" @current-change="refresh" />
    </div>
</template>

<script setup>
const props = defineProps({
    pagination: {
        current: Object,
        size: Object,
        total: Object
    },
    refresh: Function
})

const { pagination } = props

</script>

<style lang="scss" scoped>
.main-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    overflow: hidden;
}
</style>